<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_50 relative">
      <bigscreen-header :headerName="contestName + '比赛选手排名'" />
    </div>

    <div class="w_full h_40 lh_40 flex_row_start ph_10">
      <div 
        class="w_25_p text_center ph_10 fs_24 relative font_zh ls_3 cursor" 
        :class="groupId == group.id ? 'main_color' : 'color_fff'"
        v-for="(group, index) in groupList" :key="index"
        @click="clickGroup(group)">
        {{ group.name }}
        <div class="bottom_border" v-show="groupId == group.id"></div>
      </div>
    </div>

    <div 
      class="w_full h_full-100 mt_10 flex_row_start align_content_start flex_wrap" 
      v-loading="isShowLoading"  
      element-loading-text="加载中..."
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div 
        class="w_20_p h_20_p cursor p_10"
        v-for="(item, index) in personSortList" :key="index"
      >
        <div class="full fs_1vw pr_10 bgc_fff border_radius_10 p_10 flex_row_start">
          <div class="w_100 h_full">
            <img class="w_100 h_full object_fit_cover lh_80 border_radius_10" v-if="item.avatar" :src="formatAnimalImg(item.avatar)" alt="">
            <img class="w_100 h_full object_fit_cover lh_80 border_radius_10" v-else src="../assets/image/user.png" alt="">
          </div>

          <div class="w_full-100 h_full p_10 flex_column_between">
            <!-- <div class="w_full color_000 text_left font_zh main_color">当前排名：{{ item.rank }}</div> -->
            <div class="w_full text_left font_zh main_color pb_5">编号：{{ str + item.personNumber }}</div>
            <div class="w_full text_left fw_bold pb_5 flex_row_start">
              <div class="w_50">姓名：</div>
              <div class="w_full-50">
                <div class="w_full ellipsis">{{ formatName(item.name).zh }}</div><br/>
                <div class="w_full ellipsis">{{ formatName(item.name).en }}</div>
              </div> 
            </div>
            <div class="w_full text_left fw_bold color_ff2c64">得分: {{ item.totalScore }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <bigscreen-footer />
  </div>
</template>

<script>
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
  import GridLoader from 'vue-spinner/src/GridLoader.vue'

  import { getPersonTypeList, getPersonScoreList } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'PersonSort',
    components: { BigscreenHeader, BigscreenFooter, PulseLoader, GridLoader },
    data() {
      return {
        isShowLoading: false,
        str: null,

        contestId: null,
        contestName: null,

        groupId: null,
        groupList: [],

        personSortList: [],

        timer: null
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      this.contestId = contestId
      this.contestName = contestName

      this.formatABC(contestId)

      // 获取分组列表
      this.getPersonTypeList()
    },
    destroyed() {
      clearInterval(this.timer)
      this.timer = null
    },
    methods: { 
      // 获取 分组列表
      async getPersonTypeList() {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }

        let res = await getPersonTypeList()
        try {
          if (res.code == 1000) {
            this.groupList = res.data
            this.groupId = res.data[0].id

            // 获取 选手得分 列表
            this.getPersonScoreList(this.contestId, res.data[0].id)

            this.timer = setInterval(() => { this.getPersonScoreList(this.contestId, res.data[0].id) }, 1000 * 5)
          }
        } catch(err) {
          console.log('获取分组列表失败 : ', err);
        }
      },

      // 获取 选手 排名
      async getPersonScoreList(contestId, groupId) {
        let res = await getPersonScoreList(contestId, groupId)
        try {
          if (res.code == 1000) {
            this.personSortList = res.data
            this.isShowLoading = false
          }
        } catch(err) {
          console.log('获取剪羊毛选手排名失败 : ', err);
        }
      },

      // 格式化 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list[0]
      },

      // 点击分组
      clickGroup(item) {
        if (this.timer) {
           clearInterval(this.timer) 
          this.timer = null
        }

        this.isShowLoading = true
        this.groupId = item.id

        this.personSortList = []

        setTimeout(() => {
          this.getPersonScoreList(this.contestId, item.id)
        }, 500)

        this.timer = setInterval(() => { this.getPersonScoreList(this.contestId, item.id) }, 1000 * 5)
      },

      // 格式化 排名 icon
      formatJugdeIcon(val) {
        let icon = ''

        if (val == 1) {
          icon = 'first_icon'
        } else if (val == 2) {
          icon = 'sec_icon'
        } else if (val == 3) {
          icon = 'third_icon'
        } else {
          icon = ''
        }

        return icon
      }, 

      goToPage(path) {
        this.$router.push(path)
      },

      formatName(name) {
        let str = name.trim().split(" ")
        let str_2 = str.pop()
        
        let result = {
          zh: str_2,
          en: str.join(" ") 
        }

        return result
      },

      // 
      formatABC(id) {
        if (id == 3) {
          this.str = 'A'
        } else if (id == 1) {
          this.str = 'B'
        } else if (id == 2) {
          this.str = 'C'
        } else {
          this.str = ''
        }
      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }

  .text_normal { white-space: pre-line; }

  .s { color: rgba(0, 0, 0, 0.8) }
</style>